<template>
	<view class="searchs_rich">
		<view class="search_box">
			<input type="text" placeholder="请输入" placeholder-class="placeholdesClassRich" class="input"
				@confirm="onConfirm" @input="onChange" focus :value="content" />
			<view class="confirm" @click="onConfirm">搜索</view>
			<image src="../../static/RICHhome/RICHsearch-2.png" mode="scaleToFill" class="icon"></image>
		</view>
		<view class="hot_rich">
			<view class="hot-list-rich">
				<view v-for="(item, index) in hotList" :key="index" class="item" @click="getContent(item)">
					<text class="s" :style="{
                            color: index === 0 ? '#FF2C1C' : index === 1 ? '#F7870C' : index === 2 ? '#FFC243' : '#999999'
                        }">
						{{ index + 1 }}
					</text>
					<text style="font-size: 28rpx; font-weight: 500; color: #333333">
						{{ item }}
						<text class="ihot" v-if="index === 0">hot</text>
					</text>
				</view>
			</view>
		</view>
		<view class="history_rich" v-if="uid">
			<view class="title">
				<view class="title-left">搜索历史</view>
				<view class="title-right" @click="onDelete">清空</view>
			</view>
			<text v-for="(item, index) in history" :key="index" class="historys_rich" @click="getContent(item)">
				{{ item }}
			</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				hotList: [],
				history: [],
				content: '',
				uid: '',



				//下面是没用的垃圾混淆代码
				renzhengTimeSta1111111: true, //初次请求认证时间默认是带有的，
				zhuceTimeSta11111: false, //初次请求注册时间默认是没有的
				renzhengTimeList11111: [],
				zhuceTimeStaList1111: null,
				detailOrderIdStr11111: '',
				threeTabCurrent1111: 0,
				applyGOodsList11111: [], //供货商列表
				allCardEnterSta1111: false, //默认是false，点击批量卡券入库的时候变为true
				codeAddNumsList11111: [],
				numsList11111: [],
				dataSourceBqcp1111: [],
				selectedRowKeys1111: [],
				selectedRowKeysB11111: [],
				rkVisible11111: false,
				rkjlVisible1111: false,
				lhjlVisible1111: false,
				currentStyleData22222: {},
				dataSourceStyle2222: [],
				showStyleData2222: false,
				indexTemplate2222: [],
				SVGCircleElement3ee: '',
				vshoweqwsc1111: false,
				showStyleDataInfo2222: false,
				opeCategoryList2222: [],
				leimuVisible2222: false,
				selectedRowKeys02222: [],
				selectionRows02222: [],
				selectedRowKeys133333: [],
				selectionRows13333: [],
				selectedRowKeys2333: [],
				selectionRows23333: [],
				selectedRowKeys33333: [],
				selectionRows33333: [],
				selectedRowKeys4333: [],
				selectionRows43333: [],
				curwfqwrentStyleDaterwaInfo444: {},
				currwerentStywerleDatweraInfo1444: {},
				currewerntStyleDataInfo24444: {},
				currentweStyleDytuataIwenfo34444: {},
				currenwetStdfgyleDataInfo44444: {},
				checkZfbPhone_h5444: '',
				plNafgdvfdtjyme4444: '', //四大品类的名字
				uniPdfgrtylatform444: '', //运行环境mp-alipay mp-weixin
				refgjtytrsemark555: '', //备注
				timefgjSelStr5555: '', //选择的上门时间（2023-08-31 00:00:00）
				amOdcuiofasrpm5555: '', //选择的上门时间是上午还是下午
				pageShnjlkgohowTime5555: '', //页面上用户看到的显示的时间
				paraghsdfmsw454: {},
				valhgujtueNum56756: 0,
				addrdraess56756: {}, //上门收货地址
				adawerterydressId575: 0,
				sceoyuitne57567: '',
				tntuiopId56757: '',
				weictyuratCustomer5756: '',
				yuidurtyuoy567567: false,
			};
		},
		onLoad(e) {
			this.onQuery();
			this.content = e.swiperData;
			this.uid = this.$getUid()
		},
		onShow() {
			this.onQuery();
			this.uid = this.$getUid()
		},
		methods: {
			//搜索页面数据获取
			onQuery() {
				if (this.$getUid()) {
					this.$request('member/mall/userWordHistory/searchPage', {}, 'get', true).then((res) => {
						this.hotList = res.data.hotSearchList;
						this.history = res.data.history;
					});
				}
			},
			//清空
			onDelete() {
				this.$request('member/mall/userWordHistory/deleteUserWordHistory', {}, 'get', true).then((res) => {
					this.onQuery();
				});
			},
			getContent(val) {
				this.$onTo(`/pagesClass-rich/goodsList-rich/goodsList-rich?content=${val}&name=商品列表`);
			},
			//获取input内容
			onChange(e) {
				console.log('搜索栏的内容', e);
				this.content = e.detail.value;
			},
			//搜索
			onConfirm() {
				if (this.content) {
					this.$onTo(`/pagesClass-rich/goodsList-rich/goodsList-rich?content=${this.content}&name=商品列表`);
				} else {
					this.content = '黄金'
					this.$onTo(`/pagesClass-rich/goodsList-rich/goodsList-rich?content=${this.content}&name=商品列表`);
					// uni.showToast({
					//     title: '请输入'
					// });
				}
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.searchs_rich {
		.search_box {
			padding-left: 20rpx;
			margin-bottom: 30rpx;
			position: relative;
			padding-top: 20rpx;

			.placeholdesClassRich {
				font-size: 28rpx;
				color: #ababba;
				font-weight: 500;
			}

			.input {
				border-radius: 36rpx 0 0 36rpx;
				padding-left: 80rpx;
				width: 100%;
				height: 62rpx;
				background: #f7f8fb;
			}

			.confirm {
				width: 114rpx;
				height: 62rpx;
				@include global-background-color-red();
				color: #fff;
				font-weight: 400;
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				z-index: 99;
				border-radius: 0px 35rpx 35rpx 0px;
				text-align: center;
				line-height: 62rpx;
				font-size: 28rpx;
			}

			.icon {
				position: absolute;
				top: 40rpx;
				left: 50rpx;
				width: 29rpx;
				height: 29rpx;
			}
		}

		.hot_rich {
			padding-left: 42rpx;
			padding-right: 30rpx;

			.hot-list-rich {
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;


				.item {
					width: 50%;
					margin-top: 20rpx;

					.s {
						font-size: 28rpx;
						font-weight: 600;
						color: #999999;
						width: 40rpx;
						display: inline-block;
					}

					.ihot {
						color: #b7761a;
						margin-left: 10rpx;
						font-size: 24rpx;
						font-weight: 400;
						background: #fff4c3;
						border-radius: 18rpx;
						padding: 2rpx 10rpx;

					}
				}
			}

			.title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333333;
			}
		}

		.history_rich {
			padding-left: 42rpx;
			padding-right: 30rpx;

			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 64rpx;
				margin-bottom: 20rpx;

				.title-left {
					font-size: 32rpx;
					font-weight: 600;
					color: #333333;
				}

				.title-right {
					font-size: 28rpx;
					font-weight: 400;
					color: #999999;
				}
			}

			.historys_rich {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				background: #f5f5f8;
				padding: 6rpx 20rpx;
				border-radius: 29rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
				display: inline-block;
			}
		}
	}
</style>